<template>
	<view class="alterPsw">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>设置支付密码</custom-navi>
		<view class="alterPsw-title">
			{{title}}
		</view>
		<view class="alterPsw-hint">
			{{subhead}}
		</view>
		<view class="">
			<validcode ref="pwd" :maxlength="6" :isPwd="true" @finish="getPwd"></validcode>
		</view>
		<view class="alterPsw-succeed" v-if="upSucceed">
			<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>添加银行卡</custom-navi>
			<view class="list">
				<view class="list-title">持卡人</view>
				<view class="list-txt"><input type="text" value="" placeholder="请输入持卡人姓名" placeholder-style="font-size:28rpx; color:rgba(149, 151, 166, 1);" align="left"/></view>
			</view>
			<view class="list">
				<view class="list-title"><text>卡</text>号</view>
				<view class="list-txt"><input type="text" value="" placeholder="请输入持卡人姓名" placeholder-style="font-size:28rpx; color:rgba(149, 151, 166, 1);" align="left"/></view>
			</view>
			<view class="list">
				<view class="list-title">发卡行</view>
				<view class="list-txt"><input type="text" value="" placeholder="请输入持卡人姓名" placeholder-style="font-size:28rpx; color:rgba(149, 151, 166, 1);" align="left"/></view>
			</view>
			<view class="list">
				<view class="list-title">开户行</view>
				<view class="list-txt"><input type="text" value="" placeholder="请输入持卡人姓名" placeholder-style="font-size:28rpx; color:rgba(149, 151, 166, 1);" align="left"/></view>
			</view>
			<view class="confirmBtn" @tap="confirmBtn">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				original:'', // 密码
				newPsw:'', // 二次输入密码
				title:'', // 标题
				subhead:'', // 副标题
				upSucceed:false, // 提交成功页面是否显示
				genre:''
			}
		},
		onLoad(option) {
			console.log(option.genre)
			this.genre = option.genre
			if(option.genre==='1'){
				this.title = '添加银行卡',
				this.subhead='请输入密码验证身份'
			}else{
				this.title = '首次添加银行卡',
				this.subhead='请先输入提现密码'
			}
		},
		methods:{
			getPwd(e){ // 输入密码按钮
				let _this = this
				if(this.genre === '1'){
					if(this.original == ''){
						this.original = e
						this.$refs.pwd.clear();
						uni.showLoading({
							title: '密码验证中'
						});
						setTimeout(function () {
							uni.hideLoading();
							_this.upSucceed = true
						}, 500);
					}
				}else{
					if(this.original == ''){
						this.original = e
						this.$refs.pwd.clear();
						this.title = '重复输入支付密码'
						this.subhead = '请先输入提现密码'
					}else if(this.newPsw == ''){
						this.newPsw = e
						if(this.newPsw != this.original){
							this.newPsw = ''
							this.$utils.common.toast.fail("密码不一致");
							return this.$refs.pwd.clear();
						}
						uni.showLoading({
							title: '数据提交中'
						});
						setTimeout(function () {
							uni.hideLoading();
							_this.upSucceed = true
						}, 500);
					}
				}
				
				
			},
			confirmBtn(){
				this.$utils.common.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.alterPsw{
		height: 100vh;
		background-color: #FFFFFF;
		text-align: center;
		position: relative;
		// padding: 96rpx;
		&-succeed{
			position: absolute;
			width: 100%;
			height: 100vh;
			background-color: #FFFFFF;
			top: 0;
			left: 0;
			text-align: center;
			z-index: 999;
			padding: 0rpx 32rpx;
			.list{
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid rgba(235,235,235,1);
				padding: 26rpx 0rpx;
				&-title{
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(3,3,3,1);
					opacity:1;
					text{
						margin-right: 30rpx;
					}
				}
				&-txt{
					margin-left: 40rpx;
				}
			}
			.icon{
				width: 138rpx;
				height: 139rpx;
				margin: 0 auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(0, 144, 250, 1);
				opacity:1;
				margin-top: 20rpx;
			}
			.subhead{
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(149,151,166,1);
				opacity:1;
				margin-top: 12rpx;
			}
			.confirmBtn{
				width:686rpx;
				height:88rpx;
				background:rgba(0, 144, 250, 1);
				border-radius:10rpx;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:88rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				margin-top: 200rpx;
			}
		}
		&-title{
			font-size:60rpx;
			font-family:Source Han Sans CN;
			font-weight:500;
			color:rgba(69,69,69,1);
			opacity:1;
			margin-top: 100rpx;
		}
		&-hint{
			font-size:32rpx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:rgba(69,69,69,1);
			opacity:1;
			margin-top: 30rpx;
			margin-bottom: 130rpx;
		}
	}
</style>
